CSS Font
CSS font 속성은 font family, boldness, size 와 텍스트의 스타일을 정의합니다.
Serif 와 Sans-serif Font의 차이
CSS Font Families
CSS 에는 font family 이름의 두 가지 유형이 있습니다:
- generic family - 비슷한 모양으로 font families 그룹 (like "Serif" or "Monospace")
- font family - 특정 font family (like "Times New Roman" or "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times
New Roman Georgia |
Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana |
"Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier
New Lucida Console |
All monospace characters have the same width |
 |
Note: 컴퓨터 화면에서는 sans-serif 글꼴이 serif 글꼴들 보다 읽기 쉽다. |
|---|
Font Family
텍스트의 font family 는 font-family 의 속성으로 설정합니다.
font-family 속성은 "대체(fallback)"시스템과 같은 여러 가지 글꼴 이름을 유지해야 합니다. 브라우저가 첫번째 폰트를 지원하지 않는 경우, 다음 폰트를 시도하게 됩니다.
원하는 글꼴로 시작하고, 다른 글꼴을 사용할 수 없는 경우, 브라우저가 generic family에서 유사한 글꼴을 선택할 수 있도록, generic family로 종료합니다.
Note: 글꼴 패밀리의 이름이 한 단어 이상이면, 다음 처럼 따옴표로 묶어야합니다: "Times New Roman".
하나 이상의 font family은 쉼표로 구분된 목록으로 지정됩니다:
For more commonly used font combinations, look at our Web Safe Font Combinations.
Font Style
The font-style 속성은 주로 italic 텍스트를 지정하는 데 사용됩니다.
이 속성은 다음과 같은 세 가지 값이 있습니다:
- normal - 텍스트가 정상적으로 표시됩니다.
- italic - 텍스트는 이탤릭체로 표시됩니다.
- oblique - 텍스트가 "기울어집니다"( oblique는 italic 꼴과 매우 유사하지만 덜 지원됨)
Example
p.normal
{
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Try it yourself » Font Size
font-size 속성은 텍스트의 크기를 설정합니다.
텍스트 크기를 관리 할 수 있다는 것은 웹 디자인에서 중요하다. 그러나 단락을 제목처럼, 또는 제목을 단락처럼 보이게 글꼴 크기 조정을 사용하면 안된다.
항상 적절한 HTML 태그를 사용하시오 : 제목을 위해서는 <h1> - <h6> 를, 단락을 위해서는 <p>를.
font-size 값은 절대 또는 상대 크기가 있습니다.
절대적 크기:
- 지정된 크기로 텍스트를 설정합니다
- 사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없습니다
- 출력의 물리적 크기가 알려진 때 절대 크기는 유용
상대적 크기:
- 주변 요소에 상대적인 크기를 설정합니다
- 사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다
|
Note: 글꼴 크기를 지정하지 않으면 일반 텍스트의 기본 크기는 단락과 같은 크기인 16px입니다. (16px=1em). |
|---|
픽셀로 Font Size 설정
픽셀로 텍스트 크기를 설정하면, 텍스트 크기를 완벽하게 제어 할 수 있다:
The example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.
Note: The example above does not work in IE, prior version 9.
The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).
Em으로 Font Size 설정
인터넷 익스플로러의 이전 버전과의 크기 조정 문제를 피하려고 많은 개발자들이 px 대신 em 을 사용합니다.
em 크기 단위는 W3C에 의해 권장됩니다.1em 은 현재의 글꼴 크기와 동일합니다. 브라우저의 기본 텍스트 크기가 16px입니다. 그래서, 1em 기본 크기는 16px입니다.
크기는 다음 공식을 사용하여 pixel 로부터 em 으로 계산 될 수있다 : pixels/16=em
Example
h1
{
font-size: 2.5em; /*
40px/16=2.5em */
}
h2 {
font-size: 1.875em; /*
30px/16=1.875em */
}
p {
font-size: 0.875em; /*
14px/16=0.875em */
}
Try it yourself » 위의 예에서, em 단위의 텍스트 크기는 이전의 pixel 단위의 것과 같다. 그러나, em 크기는 모든 브라우저에서의 텍스트 크기를 조정할 수 있게 해준다.
Percent 와 Em 결합 사용하기
모든 브라우저에서 작동하는 솔루션은 <body> 요소에서 기본 글꼴 크기를 %로 설정하는 것입니다:
Example
body
{
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Try it yourself » 이 코드는 잘 동작된다. 모든 브라우저에서 같은 텍스트 크기를 보이며, 모든 브라우저에서 모든 텍스트의 줌과 크기 변경이 허용된다!
More Examples
Set
the boldness of the font
This example demonstrates how to set the boldness of a font.
Set
the variant of the font
This example demonstrates how to set the variant of a font.
All
the font properties in one declaration
This example demonstrates how to use the shorthand property for
setting all of the font properties in one declaration.
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
All CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |